import React from 'react';
import { IRouteComponentProps } from 'umi';
import '../index.less';
import { useModel } from 'umi';
import { PageHeader } from 'antd';
import { history } from 'umi';

// import 'antd/dist/antd.css';
import { useState, useEffect } from 'react';
const BrandDetail: React.FC<IRouteComponentProps> = ({ match, route }) => {
  let id = JSON.parse(JSON.stringify(match)).params.id;
  //详情
  let [brandDetail, setBrandDetail] = useState([]);
  //商品列表
  let [goodsData, setGoodsData] = useState([]);
  //MODEL
  let { detailData, detailDataList } = useModel('home', (model) => ({
    detailData: model.detailData,
    detailDataList: model.detailDataList,
  }));
  async function getList() {
    let result = await detailData(id);
    setBrandDetail(result);
    let res = await detailDataList({ brandId: id });
    setGoodsData(res);
  }
  useEffect(() => {
    getList();
  }, []);
  console.log(goodsData);
  return (
    //   制造商详情页
    <div className="brandDetail">
      <PageHeader
        className="site-page-header"
        onBack={() => {
          history.go(-1);
        }}
        title={brandDetail.name}
      />
      <img src={brandDetail.list_pic_url} alt="" />
      <p>{brandDetail.simple_desc}</p>
      {/* 根据制造商ID获取制造商详情 */}
      <div className="goodsDetailCss">
        {goodsData.map((ite: any) => {
          return (
            <dl
              key={ite.id}
              onClick={() => {
                history.push(`/goods/${ite.id}`);
              }}
            >
              <dt>
                <img src={ite.list_pic_url} alt="" />
              </dt>
              <dd>
                <p>{ite.name}</p>
                <p>￥{ite.retail_price}</p>
              </dd>
            </dl>
          );
        })}
      </div>
    </div>
  );
};

export default BrandDetail;
